<template>
    <div class="flex-col homepage">
        <div class="wrapper">
            <el-card class="wrapper-header">
                <div slot="header">
                    <span>用户总数量</span>
                </div>
                <div>{{ countResidents }}</div>
            </el-card>
            <el-card class="wrapper-header">
                <div slot="header">
                    <span>房屋总数量</span>
                </div>
                <div>269</div>
            </el-card>
            <el-card class="wrapper-header">
                <div slot="header">
                    <span>车位总数量</span>
                </div>
                <div>159</div>
            </el-card>
        </div>
        <div class="flex-row wrapper-two">
            <div class="wraper-col">
                <div>近一周报修量趋势</div>
                <div id="chart" style="width: 100%; height:100%"></div>
            </div>
            <div class="flex-col flex-row wraper-col-two">
                <div class="box">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>便捷导航</span>
                        </div>
                        <div v-for="(n, index) in navigation" :key="index" class="text_item">
                            <div @click="$router.push(n.url)">
                                {{ n.name }}
                            </div>
                        </div>
                    </el-card>
                </div>
                <div class="box-two">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>备忘录</span>
                        </div>
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
                        </el-input>
                    </el-card>
                </div>
            </div>
        </div>
        <div style="width: 100%;">
            <div>
                <div style="float: left">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="住户类型">
                            <el-select v-model="type" clearable placeholder="请选择">
                                <el-option label="住户姓名" value="userName"></el-option>
                                <el-option label="手机号" value="phone"></el-option>
                                <el-option label="证据号码" value="idCard"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="float: left; margin-left: 60px">
                    <el-input style="width: 300px" v-model="name" placeholder="请输入内容"></el-input>
                </div>
                <div>
                    <el-button style="float: right" type="primary" @click="findAll()">重置</el-button>
                    <el-button style="float: right; margin-right: 30px" type="primary" @click="findIdResidents()">查询</el-button>
                </div>
            </div>
        </div>
        <div class="wrapper-three">
            <div>
                <el-table ref="multipleTable" :data="residentsList" tooltip-effect="dark" style="width: 100%">
                    <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
                    <el-table-column label="姓名" prop="userName" width="120">
                    </el-table-column>
                    <el-table-column prop="identity" label="类型" width="120">
                    </el-table-column>
                    <el-table-column prop="middleState" label="状态" show-overflow-tooltip>
                        <template slot-scope="scope" style="color: red;">
                            <div v-if="scope.row.middleState == 0">
                                审核成功
                            </div>
                            <div v-if="scope.row.middleState == 1">
                                审核中
                            </div>
                            <div v-if="scope.row.middleState == 2">
                                审核失败
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="idCard" label="证件号码" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号码" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="cellNumber" label="房间" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div v-if="scope.row.howMany != null">
                                {{ scope.row.howMany }}楼{{ scope.row.cellNumber }}单元{{ scope.row.howFloor }}0{{
                                        scope.row.howPortal
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="auditResident(scope.row)">审核</el-button>
                            <el-button type="text" @click="updateResident(scope.row)">编辑</el-button>
                            <el-button type="text" @click="delResident(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 编辑 -->
                
                <!-- <div class="block">
                    <div class="page">
                        <el-pagination background layout="prev, pager, next" :page-count="page.pages"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            countResidents: '',
            type: '',
            name: '',
            residentsList: [],
            nameX: [],
            timeY: [],
            navigation: [
                { name: '新建用户', url: '/' },
                { name: '车位管理', url: '/' },
                { name: '新建月卡', url: '/' },
                { name: '新建报修', url: '/' },
                { name: '访客记录', url: '/' },
                { name: '账单管理', url: '/' },
            ],
            forms: {
                howMany: '',
                houseUse: "",
                builtTime: "",
                buildingSum: "",
                totalFloor: "",
                remark: "",
                buildingId: "",
            },
            identity: "",
            state: "",
            communityId: "",
            dialogFormVisibleEdit: false, // 用于用户编辑弹窗控制关闭
            // 分页字段
            page: {},
            tableData: [],
            multipleSelection: [],
        }
    },
    mounted() {
        this.drawLine();
    },
    created() {
        this.findAll()
        this.countWorkbench()
        this.drawLine();
    },
    methods: {
        delResident(row) {
            this.$axios
                .get("systemuser/user/delResident/"+row.userId)
                .then(res => {
                    if (res.data.code == 20000) {
                        console.log("成功")
                        this.findAll
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },
        auditResident(row) {
            this.$router.push({ path: '/auditResident', query: { paramName: row } })
        },
        updateResident(row) {
            this.$router.push({ path: '/updateResident', query: { paramName: row } })
        },
        findIdResidents(){
            this.$axios
                .get("systemuser/user/findIdResidents/"+this.type+"/"+this.name)
                .then(res => {
                    if (res.data.code == 20000) {
                        console.log("成功")
                        this.residentsList = res.data.data.residentsList
                        console.log(this.residentsList)
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },
        findAll() {
            this.$axios
                .get("systemuser/user/findResidents")
                .then(res => {
                    if (res.data.code == 20000) {
                        console.log("成功")
                        this.residentsList = res.data.data.residentsList
                        console.log(this.residentsList)
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },
        countWorkbench() {
            this.$axios
                .get("systemuser/user/countWorkbench")
                .then(res => {
                    if (res.data.code == 20000) {
                        console.log("成功")
                        this.countResidents = res.data.data.countResidents
                        console.log(this.countResidents)
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },

        drawLine() {
            var chartDom = document.getElementById('chart');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };

            option && myChart.setOption(option);
        },


        // drawLine() {
        //   // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
        //   let myChart = this.$echarts.init(document.getElementById("chart"));
        //   var that = this;
        //   this.$axios.get("/book/getzhutu").then((res) => {
        //     // debugger;
        //     console.log(res.data);
        //     //还需声明一个空数组来存放与柱状条数据对应的名称
        //     //获取到的数据需要转换成Json字符串,这里我也不是很明白，在控制台调试的时候，获取到的数据都是[object,Object]这样的格式，所以我只能转换一下
        //     let outdata = JSON.stringify(res.data.obj);
        //     //这里还需eval来处理一下字符串转为json对象，如此就能获取到数据了
        //     let xqo = eval("(" + outdata + ")");
        //     //根据返回的数据，循环遍历出你要展示的数据
        //     for (var i in xqo) {
        //       //这里我展示的是后台返回的每条数据里面的bookname和num
        //       that.nameX.push(xqo[i].yue);
        //       that.timeY.push(xqo[i].zongshu);
        //     }
        //     // 绘制图表s
        //     let option = {
        //       xAxis: {
        //         type: "category",
        //         data: that.nameX,
        //       },
        //       yAxis: {
        //         type: "value",
        //       },
        //       series: [
        //         {
        //           data: that.timeY,
        //           type: "bar",
        //           showBackground: true,
        //           backgroundStyle: {
        //             color: "rgba(180, 180, 180, 0.2)",
        //           },
        //         },
        //       ],
        //     };
        //     myChart.setOption(option);
        //   });
        // },
    }
}
</script>
<style >
/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 16px
}

* {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
}

.flex-col {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.flex-row {
    display: flex;
    align-items: flex-start;
}


.flex-col .flex-row {
    width: 100%
}

/** 全局样式-结束*/

.homepage {
    padding: 60px 240px 0px 240px;
}

.wrapper {
    width: 100%;
    height: 180px;
    margin: 0 auto;
}

.wrapper-header {
    width: 30%;
    float: left;
    margin-right: 45px;
}



.homepage .wrapper-two {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 40px;
}

.homepage .wrapper-two .wraper-col {
    width: 970px;
    height: 470px;
}

.homepage .wrapper-two .wraper-col-two {
    width: 430px;
}

.homepage .wrapper-two .box {
    width: 100%;
    height: 220px;
    margin-bottom: 40px;
}

.homepage .wrapper-two .box-two {
    width: 100%;
    height: 210px;
}

.homepage .wrapper-three {
    width: 100%;
    height: 290px;
}

.text_item {
    width: 25%;
    float: left;

}

.box-card {
    height: 200px;
    margin-right: 15%;
}
</style>